<template>
    <div class="login_container">
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form class="login_form" :model="loginForm" :rules="rules"  ref="loginForms">
                    <h1>Author: dcyao</h1>
                    <h2>欢迎来到后台管理</h2>
                    <el-form-item prop="username">
                        <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                            type="password"
                            :prefix-icon="Lock"
                            v-model="loginForm.password"
                            show-password
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            class="login_btn"
                            type="primary"
                            size="default"
                            @click="login"
                            :loading="loading"
                        >
                            登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { ElNotification, FormInstance, FormRules } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';

const userStore =  useUserStore()
// 获取el-form组件
let loginForms = ref<FormInstance>()
// 定义变量控制按钮加载效果
let loading = ref(false)
// 获取路由器
// 收集账号与密码的数据
let loginForm = reactive({ username: 'admin', password: 'atguigu123' })
const rules: FormRules = {
    username: [{
        required: true, trigger: 'change', validator(rule, value, callback, source, options) {
            if(value.length >= 5) {
                callback()
            }else {
                callback(new Error('账号长度至少为5位'))
            }
        },
    }],
    password: [{
       required: true, trigger: 'change',validator(rule, value, callback, source, options) {
        if(value.length >= 5) {
                callback()
            }else {
                callback(new Error('账号长度至少为5位'))
            }
        },
    }]
}
const router = useRouter()
const route = useRoute()
const login = async () => {
    await loginForms.value?.validate();
    loading.value = true;
    // 开始提交数据即可
    try {
        await userStore.userLogin(loginForm)
        // 路由重定向
        loading.value = false;
        const redirect = route.query.redirect as string;
        router.push({
            path: redirect || '/'
        })
        ElNotification({
            type: 'success',
            message: '欢迎回来',
            title: `HI，您好`
        })
    }  catch( error ) {
        loading.value = false;
        ElNotification({
            type: 'error',
            message: (error as Error).message,
        })
    }
}
</script>

<style scoped lang="scss">
.login_container {
    width: 100%;
    height: 100vh;
    background: url('@/assets/images/background.jpg') no-repeat;
    background-size: cover;

    .login_form {
        position: relative;
        width: 80%;
        top: 30vh;
        background: url('@/assets/images/login_form.png') no-repeat;
        background-size: cover;
        padding: 40px;

        h1 {
            color: white;
            font-size: 40px;
        }

        h2 {
            color: white;
            font-size: 20px;
            margin: 20px 0px;
        }

        .login_btn {
            width: 100%;
        }
    }
}
</style>
